<template>
  <div class="smart-compute-menu" v-if="dialogVisible" @mouseleave="dialogVisible = false">
    <!-- 左侧标题及描述区域 -->
    <div class="left-section" >
      <h3>智算服务</h3>
      <p style="max-width: 200px">
        打造统一的产品能力，实现算网调度、训练推理、技术架构、资源管理一体化智算服务
      </p>
      <a href="#" class="deepseek-link">智算云（DeepSeek专区）></a>
    </div>
    <!-- 右侧各分类列表区域 -->
    <div class="right-section">
      <div class="right-content">
        <div class="menu-column">
          <h4>科研助手</h4>
          <ul>
            <li v-for="item in researchAssistantList" :key="item">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="menu-column">
          <h4>算力互联调度平台</h4>
          <ul>
            <li v-for="item in computeDispatchList" :key="item">{{ item }}</li>
          </ul>
        </div>
        <div class="menu-column">
          <h4>一站式智算服务平台</h4>
          <ul>
            <li v-for="item in oneStopServiceList" :key="item">{{ item }}</li>
          </ul>
        </div>
        <div class="menu-column">
          <h4>智算一体机</h4>
          <ul>
            <li v-for="item in smartComputeList" :key="item">{{ item }}</li>
          </ul>
        </div>
        <div class="menu-column">
          <h4>大模型</h4>
          <ul>
            <li v-for="model in modelList" :key="model">{{ model }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['handleClose']);

// 定义各分类数据
const researchAssistantList = ref([
  '算力商城',
  '应用商城',
  '开发机',
  '并行计算',
]);
const computeDispatchList = ref(['应用市场', '算力市场', '算力调度推荐']);
const oneStopServiceList = ref(['模型广场', '体验中心', '服务接入']);
const smartComputeList = ref(['智算一体机']);
const modelList = ref([
  'DeepSeek-R1-昇腾版(671B)',
  'DeepSeek-R1-英伟达版(671B)',
  'DeepSeek-V3-昇腾版(671B)',
  'DeepSeek-R1-Distill-Llama-70B',
  'DeepSeek-R1-Distill-Qwen-32B',
  'Qwen2-72B-Instruct',
  'StableDiffusion-V2.1',
  'TeleChat-12B',
]);

const dialogVisible = ref(false);
function showModal() {
  dialogVisible.value = true;
}

function hideModal() {
  dialogVisible.value = false;
  emit('handleClose');
}

defineExpose({
  hideModal,
  showModal,
});
</script>

<style scoped lang="scss">
.smart-compute-menu {
  position: fixed;
  top: 70px;
  left: 0;
  z-index: 999;
  display: flex;
  // padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;

  width: 100vw;
  justify-content: center;
  transition: all 0.3s;
  animation: colorFade 0.2s ease-in-out;
  transform-origin: top;
}

@keyframes colorFade {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.left-section {
  width: 30%;
  margin-right: 20px;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 20px;
}
.left-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.left-section p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.deepseek-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}
.right-section {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.right-content {
  // max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 10px 20px;
}
.menu-column {
  width: calc(25% - 40px);
  min-width: 200px;
}
.menu-column h4 {
  font-size: 16px;
  margin-bottom: 10px;
}
.menu-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-column li {
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.menu-column li:hover {
  color: #007bff;
}

h3 {
  font-weight: bold;
}

h4 {
  font-weight: bold;
}
</style>
